<template>
	<div class="myPage">
		<div class="myAllPage">
			<div class="top">
				<!-- top部分 -->
				<div class="top_content">
					<van-row type="flex" justify="space-between">
						
							<van-col span="6" class="logo"> 
							<router-link :to="{name:'infoPage'}">
							<img src="@/assets/home/logo.jpg" alt="">
							</router-link>
							</van-col>
					  
					  <van-col span="6" class="info_content">
						  <h3 class="vipName">KimB</h3>
						  <p class="vipCard">乡村基会员卡</p>
					  </van-col>
					  <van-col span="6">
						  <router-link :to="{name:'vipMaskPage'}">
							   <van-icon class="iconsize" name="qr" size="30"/>
							  
						  </router-link>
						 </van-col>
					</van-row>
				</div>
				
			</div>
			
			<!-- 中间内容部分 -->
			<div class="mycontent">
				<!-- 我的资产 -->
				<div class="mycontent_top ">
					<p class="head_content">我的资产</p>
					<!-- 每个元素的两侧间隔相等 -->
					<van-row type="flex"  class="head_display" justify="space-around">
					  <van-col span="6">
						  <router-link :to="{name:'creditPage'}">
							  <div class="toppart">
							  	<img src="../assets/my/jifen.png" >
							  	<div class="toptxt">积分</div>
							  </div>
							  
						  </router-link>
						  
						  
						  
						  <div class="bottompart">
							  <p class="bottomnum">20</p>
							  <p class="bottomtxt">个未使用</p>
						  	
						  </div>
						  
					  </van-col>
					  <van-col span="6">
						  <router-link :to="{name:'discountPage'}">
							  <div class="toppart">
							  		<img src="../assets/my/优惠券.png" >
							  	<div class="toptxt">优惠券</div>
							  </div>
							  <div class="bottompart">
							    <p class="bottomnum">0</p>
							    <p class="bottomtxt">张未使用</p>
							  	
							  </div>
						  </router-link>
						  
						  
					  </van-col>
					  <van-col span="6">
						   <router-link :to="{name:'accountPage'}">
						  <div class="toppart">
								<img src="../assets/my/余额提现.png" >
						  	<div class="toptxt">余额</div>
						  </div>
						  <div class="bottompart">
								<p class="bottomnum">0</p>
								<p class="bottomtxt">元未使用</p>
						  	
						  </div>
						  </router-link>
					  </van-col>
					</van-row>
					
				</div>
				<!-- 我的订单 -->
				<div class="mycontent_center ">
					
					<p class="head_content">我的订单</p>
					<!-- 每个元素的两侧间隔相等 -->
					<van-row type="flex"  class="center_display" justify="space-around">
					  <van-col span="6">
						  <router-link :to="{name:'orderPage'}">
							  <div class=" center_toppart">
							  		<img src="../assets/my/账单.png" >
							  </div>
							  <div class="center_bottompart"> 
							  		<p class="center_bottomtxt">堂食/外卖</p>
							  </div>
						  </router-link>
						   
					  </van-col> <van-col span="6">
					  <router-link :to="{name:'orderPage'}">
						  <div class=" center_toppart">
						  	<img src="../assets/my/买单.png" >
						  </div>
						  <div class="center_bottompart"> 
						  	<p class="center_bottomtxt">买单订单</p>
						  </div> 
					  </router-link>
					  
						 
					  </van-col> <van-col span="6">
					  
					  <router-link :to="{name:'accountPage'}">
						  <div class=" center_toppart">
							  	<img src="../assets/my/储值.png" >
						  </div>
						  <div class="center_bottompart"> 
							  <p class="center_bottomtxt">储值订单</p>
						  </div> 
						  </router-link>
					  </van-col>
					  
					
					 
					</van-row>
				</div>
				<!-- 我的功能 -->
				<div class="mycontent_bottom ">
				<p class="head_content">我的功能</p>
				<!-- 每个元素的两侧间隔相等 -->
				<van-row type="flex"  class="center_display" justify="space-around">
				  <van-col span="6">
					  
					    <router-link :to="{name:'vipMaskPage'}">
					  <div class=" center_toppart">
						  	<img src="../assets/my/会员码.png" >
					  </div>
					  <div class="center_bottompart"> 
						  <p class="center_bottomtxt">会员码</p>
					  </div> 
					  </router-link>
				  </van-col> 
				  <van-col span="6">
						<router-link :to="{name:'reciveAddressPage'}">
							<div class="center_toppart">
								<img src="../assets/my/地址.png" >
							</div>
							<div class="center_bottompart"> 
								<p class="center_bottomtxt">收货地址</p>
							</div>
						</router-link>
							
						
					  
				  </van-col> <van-col span="6">
				  <router-link :to="{name:'changePhonePage'}"> 
						  <div class=" center_toppart">
												  	<img src="../assets/my/手机号.png" >
											  </div>
											  <div class="center_bottompart"> 
												  <p class="center_bottomtxt">换绑手机号</p>
											  </div> 
				  </router-link>
					
				  </van-col> </van-col> <van-col span="6">
					  <div class=" center_toppart">
						  	<img src="../assets/my/客 服.png" >
					  </div>
					  <div class="center_bottompart"> 
						  <p class="center_bottomtxt">联系客服</p>
					  </div> 
				  </van-col>
				</van-row>
				</div>
				
			</div>
		</div>
		
		
	</div>
</template>

<script>
import Vue from 'vue';

export default{
	name:'myPage',
	data(){
		return{
		
		}
	}
}
</script>

<style scoped >
.myAllPage{
	background-color: #f7f4f8;
	padding-bottom: 22px;
}
.top{
	height: 280px;
	background-color: #e91f3c;
	position: relative;
}
.top_content{
	position: absolute;
	
	height: 80px;
	width: 100%;
	margin-top: 120px;
}

.logo img{
	width:60px;
	height:60px;
	margin-top: 5px;
	border-radius:50%;
}
.info_content{
	display: flex;
margin-left: -39px;
	width: 160px;
}
.vipName{
	font-size: 20px;
		color: white;	
		margin-top: 20px;
}
.info_content .vipCard{
	color: #E91F3C;
	padding: 2px;
	background-color: white;
	font-size: 12px;
	margin-left: 5px;
	height: 22px;
	margin-top: 20px;
	box-sizing: border-box;
	border-radius: 8px 8px 8px 0;
}
.iconsize{
		color:white;
		
		width: 50px;
		height: 50px;
		margin-right: -30px;
		margin-top: 18px;
	}
	
	/* 中间部分 */
.mycontent{
	position: relative;
padding-top: 280px;
padding-bottom: 80px;

	width: 100%;
}
.mycontent .mycontent_top{
	position: absolute;
	top: -50px;
	left: 10px;
	right: 10px;
	width: 355px;
	height: 120px;
	border-radius:15px ;
	background-color: white;
}
.mycontent .mycontent_center{
	position: absolute;
	top: 80px;
	left: 10px;
	right: 10px;
	width: 355px;
	height: 120px;
	border-radius:15px ;
	background-color: white;
}
.mycontent .mycontent_bottom{
	position: absolute;
	top: 210px;
	left: 10px;
	right: 10px;
	width: 355px;
	height: 120px;
	border-radius:15px ;
	background-color: white;
}
.head_content{
	
	text-align: left;
	margin-left: 10px;
	font-size: 17px;
	font-weight: 800;
}
.head_display {
	height: 60px;
margin-top: -15px;
padding: 10px;
	
}
.toppart {
	display: flex;
	margin-left: 10px;
	
}
.toppart .toptxt{
	font-weight:800;
	font-size: 16px;
	margin-left: 2px;
	margin-top: -2px;
}
.bottompart{
	display: flex;

	margin-top: -5px;
	margin-left: 5px;
}
.bottompart .bottomnum{
	color: red;
	font-weight: 800;
	font-size: 15px;
	margin-top: 10px;
}

.bottompart .bottomtxt{
	font-size: 13px;
	color: #a3a3a3;
}
.head_display  img{
	width: 20px;
	height: 20px;
	margin-left: -5px;
}

.center_display{
	height: 60px;
	margin-top: -15px;
	padding: 10px;
}
.center_display .center_toppart img{
	width: 25px;
	height: 25px;
}

.center_display .center_bottomtxt{
	font-size: 13px;
	margin-top: 2px;
}
a{
text-decoration: none;
color: black;
}

</style>
